<template>
  <el-dialog
    title="修改"
    :visible.sync="dialogVisible"
    width="400px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="dialog">
      <div class="dialog-list">
        <label>节点名:</label>
        <div class="span">{{data.speedName}}</div>
      </div>
      <div class="dialog-list">
        <label>提交日期:</label>
        <div class="span">
          <el-date-picker
            v-model="formdata.speedSubmitDate"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </div>
      </div>
      <div class="dialog-list" v-if="data.speedNode === 4">
        <label require="true">金额(万元):</label>
        <div class="span">
          <el-input v-model="formdata.speedAmount"></el-input>
        </div>
      </div>
      <div class="dialog-list">
        <label>通过日期:</label>
        <div class="span">
          <el-date-picker
            v-model="formdata.speedAgreeDate"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="(dialogVisible = false), updateKey()">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import Qs from "qs";
export default {
  props: {},
  data() {
    return {
      dialogVisible: false,
      data: {},
      formdata: {
        deptId: null,
        deptName: null,
        speedAgreeDate: null,
        speedAmount: null,
        speedId: null,
        speedMonth: null,
        speedName: null,
        speedNode: null,
        speedSubmitDate: null,
        speedYear: null
      }
    };
  },
  methods: {
    submit(val) {
      if (this.formdata.speedNode === 4) {
        if (!this.formdata.speedAmount) {
          this.$message.error("金额不能为空");
          return;
        }
      }
      request({
        url: "/system/input/edit",
        method: "post",
        data: this.formdata
      }).then(res => {
        this.$emit("reload");
        this.handleClose();
      });
    },

    open(data) {
      this.data = JSON.parse(JSON.stringify(data));
      const keys = Object.keys(this.formdata);
      keys.forEach(item => {
        this.formdata[item] = this.data[item];
      });
      console.log(this.formdata);
      this.dialogVisible = true;
    },
    updateKey() {
      this.$emit("update:keyIndex", new Date().getTime());
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.updateKey();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  .dialog {
    width: 100%;

    &-list {
      width: 100%;
      min-height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 10px 0;

      label {
        width: 100px;
        text-align: right;
        padding: 0 10px;
      }

      label[require="true"]::before {
        content: "*";
        color: red;
      }

      .span {
        width: calc(100% - 100px);
        height: 100%;
        display: flex;
        align-items: center;

        .el-select,
        .el-date-editor {
          width: 100% !important;
        }
      }
    }
  }
}
</style>
